<template>
 <div id="four">
  <div class="four">
   <ul>
    <li>
     <i class="iconfont icon-xiaomixinLogo"></i>
     <p>保障服务</p>
    </li>
    <li>
     <i class="iconfont icon-xiaomixinLogo"></i>
     <p>保障服务</p>
    </li>
    <li>
     <i class="iconfont icon-xiaomixinLogo"></i>
     <p>保障服务</p>
    </li>
    <li>
     <i class="iconfont icon-xiaomixinLogo"></i>
     <p>保障服务</p>
    </li>
    <li>
     <i class="iconfont icon-xiaomixinLogo"></i>
     <p>保障服务</p>
    </li>
    <li>
     <i class="iconfont icon-xiaomixinLogo"></i>
     <p>保障服务</p>
    </li>
   </ul>
   <template v-for="item in lit">
   <div :key="item.id" class="tu">
    
        <img  :src="item.s_photos[0].path" alt="">
   
   </div>
    </template>
  </div>
  <div class="yt">
      <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/431e5fd6bfd1b67d096928248be18303.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
  </div>
 </div>
</template>

<script>
export default {
       data:()=>{
        return {
            lit:[]
        }
    },
     async mounted(){
  let res = await  this._axios.get("/api/carousel?site_id=2&project_id=38&sort=88");
 
  this.lit=res.data.result.rows
  console.log(this.lit);
}

}; 
</script>

<style lang="scss" scoped>
#four {
 margin: 45px 0;
 .four {
  display: flex;
  justify-content: space-between;
  width: 1229px;
  margin: 0 auto;
  height: 170px;
  ul {
   width: 236px;
   background: #5f5750;
   display: inline-block;
   height: 170px;
   li {
    box-sizing: border-box;
    padding-top: 20px;
    display: inline-block;
    width: 76px;
    height: 80px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    opacity: 0.7;
    &:hover {
     opacity: 1;
    }
    i {
     font-size: 20px;
    }
   }
  }
  .tu {
   display: inline-block;
   width: 316px;
   height: 170px;
   img {
    width: 316px;
    height: 170px;
   }
  }
 }
 .yt{
     width: 1229px;
     margin: 45px auto;
     img{
         width: 100%;
     }
 }
}
</style>
